<template>
  <q-card-section class="row justify-center">
    <q-form
      class="col-12 col-lg-11 col-xl-9"
      @submit.prevent.stop="editItem"
      ref="editItem"
    >
      <div class="row">
        <div class="col col-md-12">
          <q-input
            outlined
            dense
            v-model="JobName"
            label="招聘职位"
            name="JobName"
            :rules="[val => !!val || '请填写招聘职位']"
          />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-md-4">
          <q-select
            outlined
            dense
            v-model="Select.model"
            :options="Select.options"
            label="学历要求"
            clear-icon="mdi-close"
            clearable
            options-selected-class="text-primary"
            name="Qualification"
          />
        </div>
        <div class="col col-md-4">
          <q-input
            outlined
            dense
            v-model="JobNumber"
            label="招聘人数"
            name="JobNumber"
            :rules="[val => !!val || '请填写招聘人数']"
          />
        </div>
        <div class="col col-md-4">
          <q-input
            outlined
            dense
            v-model="StopDate"
            mask="date"
            :rules="['date']"
            name="StopDate"
            label="失效时间"
          >
            <template v-slot:append>
              <q-icon
                name="mdi-calendar"
                class="cursor-pointer text-primary"
              >
                <q-popup-proxy
                  ref="qDateProxy"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date v-model="StopDate">
                    <div class="row items-center justify-end">
                      <q-btn
                        v-close-popup
                        label="关闭"
                        color="primary"
                        flat
                      />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-12">
          <q-input
            outlined
            dense
            autogrow
            v-model="JobDescription"
            type="textarea"
            label="职位描述"
            name="JobDescription"
            class="q-pt-md"
          />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-12">
          <q-input
            outlined
            dense
            autogrow
            v-model="JobRequirement"
            type="textarea"
            label="任职要求"
            name="JobRequirement"
            class="q-pt-md"
          />
        </div>
      </div>
      <div class="row q-col-gutter-md">
        <div class="col col-md-4">
          <q-toggle
            v-model="Status"
            name="Status"
            label="是否审核"
            left-label
            class="q-pt-md q-ml-sm"
          />
          <div class="q-field__bottom q-field__messages col">取消审核，不会删除项目，只是不在前台显示</div>
        </div>
      </div>
      <q-separator class="q-my-md" />
      <div class="row q-col-gutter-md">
        <q-space />
        <div class="col col-md-2">
          <q-btn
            label="提交编辑"
            type="submit"
            color="primary"
            unelevated
            class="full-width"
          />
        </div>
        <div class="col col-md-2">
          <q-btn
            label="返回列表"
            type="button"
            color="info"
            unelevated
            class="full-width"
            @click="returnList"
          />
        </div>
      </div>
    </q-form>
  </q-card-section>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'PageEditRecruit',
  components: {},
  props: {},
  data () {
    return {
      // ID
      ID: '',
      // ---------- 下拉框
      Select: {
        model: {
          label: '',
          value: ''
        },
        options: [
          {
          label: '不限',
          value: '不限'
          },
          {
            label: '大专及以上',
            value: '大专及以上'
          },
          {
            label: '本科及以上',
            value: '本科及以上'
          },
          {
            label: '硕士及以上',
            value: '硕士及以上'
          },
          {
            label: '博士及以上',
            value: '博士及以上'
          }
        ],
      },
      JobName: '',
      StopDate: '',
      JobDescription: '',
      JobRequirement: '',
      JobNumber: '',
      Qualification: '',
      Status: true,
    }
  },
  methods: {
    // 获取传递过来的ID参数
    getParamsID() {
      this.ID = this.$route.params.ID
      if ( this.ID === ':ID') {
        this.$utils.notify('参数错误', 'red-8')
        this.$utils.returnPrevPage()
      }
      // console.log(this.ID)
    },
    // 获取当前日期，格式化并赋值给日期控件
    getDateNow() {
      this.StopDate = this.$utils.initDate(Date.now(), 0, 10)
    },
    // 根据ID获取数据
    getItem(url) {
      this.$api.RecruitParams(url, 'get').then (result => {
        // console.log(result)
        this.Select.model.value = result.Qualification
        this.Select.model.label = result.Qualification
        this.JobName = result.JobName
        this.StopDate = this.$utils.initDate(result.StopDate, 0, 10)
        this.JobNumber = result.JobNumber
        this.JobDescription = result.JobDescription
        this.JobRequirement = result.JobRequirement
        this.Status = result.Status
      }).catch (err => {
        switch (err.response.status) {
          case 401:
            this.unauthorized()
            break
        }
        console.log(err)
      })

    },
    // 修改
    editItem(evt) {
        const _editArticleResult = this.$utils.formatFormData(evt)
        // console.log(_editArticleResult)
        this.$api.RecruitData(this.ID, 'put', _editArticleResult).then( result => {
          if ( result === 'success') {
            //  重新请求数据列表
            this.getItem(this.ID)
            this.$utils.notify('更新成功！', 'positive')
          } else if ( result === 'error' ) {
            this.$utils.notify('数据库操作错误，请联系管理员', 'red-8')
          }
        }).catch( err => {
          switch (err.response.status) {
            case 401:
              this.unauthorized()
              break
          }
          console.log(err)
        })
    },
    // btn-返回列表
    returnList() {
      this.$router.push('/Recruits/Recruits');
    },
    // 重置表单
    formReset() {
      this.Select.model.value = ''
      this.Select.model.label = ''
      this.JobName = ''
      this.getDateNow()
      this.JobDescription = ''
      this.JobRequirement = ''
      this.JobNumber = ''
      this.Qualification = ''
      this.Status = true
    },
    // session过期操作
    ...mapMutations(['changeLogin']),
    unauthorized() {
      // 弹出警告框
      this.$utils.notify('身份信息过期','red-8')
      // 清除vuex中的token
      this.changeLogin({ Authorization: '' })
      // 路由跳转
      this.$router.push('/Login', onComplete => {}, onAbort => {});
    }
  },
  mounted() {
    this.getDateNow()
    this.getItem(this.ID)
  },
  created() {
    this.getParamsID()
  },
  beforeDestroy() {
    // 重置表单
    this.formReset()
  }
}
</script>
<style scoped>
.q-form {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
</style>
